import React, {useState} from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import TodoContainer from './TodoContainer';
import TodoFetchContainer from './TodoFetchContainer';
import Home from './Home';

function App() {
  // const [userId, setUserId] = useState(1);

  // const handleChange = (ev) => {
  //   console.log(ev.target.value)
  //   setUserId(ev.target.value)
  // }

  return (
    <div className="App">
      <header className="App-header">
        <Router>
          <div>
            <nav>
              <ul>
                <li><Link to="/home">Home</Link></li>
                <li><Link to="/todo">Todo List</Link></li>
                <li><Link to="/user/1">User1</Link></li>
              </ul>
            </nav>
            <Switch>
              <Route path="/home">
                <Home />
              </Route>
              <Route path="/todo">
                <TodoContainer />
              </Route>
              <Route path="/user/:userid">
                <TodoFetchContainer />
            </Route>
        </Switch>
      </div>
        </Router>
        {/* <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <TodoContainer />
        <div >
        用户id：<input type="text" value={userId} onChange={handleChange}  />
        </div>
        待办事项：
        <TodoFetchContainer userId={userId} /> */}
      </header>
      
    </div>
  );
}

export default App;
